<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <!-- 传一个事件修改pageList 也就是this.flightsData.flights -->
        <!-- 我们这里写一份缓存数据cacheFlightsData 在进行过滤时保持原总数据不变 -->
        <FlightsFilters :data="cacheFlightsData" @setPageList="setPageList" />

        <!-- 航班头部布局 -->
        <FlightsListHead />

        <!-- 航班信息 -->
        <div>
          <!-- 航班列表 -->
          <!-- 将每一项数据绑定给data返回给子组件 子组件进行渲染 -->
          <FlightsItem v-for="(item,index) in pageList" :key="index" :data="item" />
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>

      <!-- 侧边栏 -->
      <FlightsAside />
    </el-row>
  </section>
</template>

<script>
import moment from "moment";
import FlightsListHead from "@/components/air/flightsListHead";
import FlightsItem from "@/components/air/flightsItem";
import FlightsFilters from "@/components/air/flightsFilters";
import FlightsAside from "@/components/air/flightsAside";

export default {
  components: {
    FlightsListHead,
    FlightsItem,
    FlightsFilters,
    FlightsAside
  },
  data() {
    return {
      // 总数据列表
      flightsData: {
        // 先定义一个
        flights: [],
        info: {},
        options: {}
      },
      // 添加缓存列表
      // 这份数据存放原数据 不能被修改
      cacheFlightsData: {
        flights: [],
        info: {},
        options: {}
      },
      // 设置默认参数
      // 每页大小
      pageSize: 5,
      // 当前页码
      pageIndex: 1,
      // 总条数
      total: 0
    };
  },
  // 监听路由变化 当组件被复用时调用这个路由守卫
  // 组件内路由守卫
  async beforeRouteUpdate(to, from, next) {
    // console.log(to);
    // await后要接一个promise才有意义 我们要return一个promise
    await this.getList(to.query);
    // 获取列表之后再异步请求next
    next();
  },
  mounted() {
    this.getList(this.$route.query);
  },
  // 封装分页 通过监听pageSize 和 pageIndex变化触发不同事件，watch只能监听一个属性，computed可以监听多个属性
  computed: {
    // 我们希望拿到的是pageList 这里有属性返回 data中就不需要了
    // 保存当前分页要渲染的数据
    pageList() {
      //监听里面的数据 flightsData 一发生变化就触发该方法
      // 一开始不会触发 所以我们要设置一个默认flights 因为页面刚加载时flightsData为空数组不存在该属性 所以我们初始化一个空的flights 当页面加载时数据发生变化触发
      const arr = this.flightsData.flights.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageIndex * this.pageSize
      );
      // arr返回给pageList
      return arr;
    }
  },
  methods: {
    // 每页条数改变
    handleSizeChange(val) {
      // 选择不同的条数 每页显示不同
      // 这里的val是选择的每页显示条数
      this.pageSize = val;
    },
    // 当前页是第几页
    handleCurrentChange(val) {
      // 从当前页码提取 提取位置为 (页码-1)*每页大小pageSize  后面是结束位置
      this.pageIndex = val;
    },
    // 传递给子组件 修改pagelist的事件
    setPageList(arr) {
      // 将过滤后的数据传给当前数据列表
      // 但是这里是有问题的 只要flightsData一改变，后面的数据就都会变成过滤过的 即选择一次，后面再选择就会在这个条件下再筛选所以后面几次都拿不到数据 要添加缓存列表
      this.flightsData.flights = arr;
      // 修改数据条数为筛选后的条数
      this.total = arr.length;
      // 如果筛选之前页面不在第一页 要设置筛选变为第一页
      this.pageIndex = 1;
    },
    // 请求飞机航班列表方法 根据不同的路由参数传参
    getList(query) {
      return this.$axios({
        url: "/airs",
        params: query
      }).then(res => {
          console.log(res);
          // 拿到航班列表
          const { data } = res;
          // 赋值给data中数据
          this.flightsData = data;
          // 赋值给新拷贝的数据 这份数据一旦赋值不能被修改
          this.cacheFlightsData = { ...data };
          this.total = this.flightsData.total;
        });
    }
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>